<!--竖版卡片1-->
<template>
  <div class="bookStyleComp" :style="{ 'margin-top': top, 'padding-left': spacing,'padding-right': spacing}">
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <div class="bookStyleComp-list" :style="setStyle()">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="bookStyleComp-content"
      >
        <van-image :src="setImgPath(getMapping(item, 'imgId'), getMapping(item, 'imgUrl'))" :fit="imgType">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="../../images/base/error-icon.png" alt>
          </template>
        </van-image>
        <span class="iecturer-one etc">{{ isInitData ? getMapping(item, 'name') : item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'BookStyleComp',
  components: { CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      isLoadError: false,
      isNoData: false,
      list: [],
      defaultList: [
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可配这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        },
        {
          imgId: '',
          imgUrl: '',
          name: '这里是标题可配...',
          technicalTitle: '*******',
          synopsis: 'xxxxxxxxxxxxxxxxxxx',
          id: ''
        }
      ]
    }
  },
  async created() {
    this.pageSize = this.option.number
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    setStyle() {
      // 如果是展示了标题栏或者查看更多，则左上和右上的圆角就取消
      if (this.isShowModuleName || this.isMore === '1') {
        return {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0
        }
      }
    },
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.dataList?.data) === '[object Array]') {
        rows = result.dataList?.data || []
      } else {
        rows = result.dataList?.data.rows || []
      }

      this.list = rows
    }
  }
}
</script>

<style lang='scss'>
@import "@/styles/utility/rem.scss";

.bookStyleComp {
  .bookStyleComp-list {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: rem(16);
    padding: rem(24) 0;

    .bookStyleComp-content {
      width: 33.3%;
      align-items: center;
      display: flex;
      flex-direction: column;
      margin-bottom: rem(30);
      //margin-right: rem(42);

      .van-image {
        width: rem(190);
        height: rem(254);
        display: block;
        border-radius: rem(8);
        overflow: hidden;

        .van-image__error,
        .van-image__loading {
          width: rem(190);
          height: rem(254);
          background: #dadada;
          border-radius: rem(8);

          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }

      .iecturer-one {
        width: rem(190);
        font-size: rem(24);
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: bold;
        text-align: left;
        color: #333333;
        margin-top: rem(27);
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .bookStyleComp-content:nth-child(3n) {
      margin-right: 0;
    }
  }
}
</style>
